<template>
    <view class="page">
      <view class="top">
          <view class="flex j-content-between black">
            <text>未动销客户</text>
            <view class="flex">
                <input v-model="days" type="number" @change="inputval" style="width:2em"  :ref="input"/>
                天</view>
          </view>
          <search placeholder="客户编码/客户名称/助记符" :flag="true" :debounceTime="500" :val.sync="customerKeyword"  @change="obtainData(index)" />
      </view>
      
      <!-- <scroll-view class="content" :style="{height: contentHeight + 'px'}" scroll-y="true" @scrolltolower="queryData" > -->
        <toptabs :navList="navList" @addpage="addpage" @getdata="getdata" :end1="end1" :end2="end2" @detail="detail" @getAreaId="getAreaId" @getUserId="getUserId"/>
        
    </view>
  </template>
  
  <script>
  import { debounce } from "../../service/auth";
  import endTemp from "../../components/endTemp";
  import search from "@/components/search";
  import toptabs from "../../components/toptabs.vue";
  import { summary,summaryDetail,UserSummary,UserSummaryDetail,customerAreaSummary,customerAreaSummaryDetail} from "../../service/api/untouched";
  
  export default {
      name:'index',
      components:{search,toptabs,endTemp},
      data() {
          return {
              list:[],
              end1:false,
              end2:false,
              page0:1,
              page1:1,
              page2:1,
              size:20,
              index:0,
              days:30,
              customerKeyword:'',
              navList:[
               {
                  text:'汇总',
                  state:[],
                },
               {
                  text:'客户区域汇总',
                  state:[],
                },
               {
                  text:'业务员汇总',
                  state:[],
                },
              ],
          }
      },
      created() {
      
      this.getsummary()
      this.getArea()
      this.getUser()
      
    },
    methods: {
      getsummary(){
          const data={
              customerKeyword:this.customerKeyword,
              days:this.days,
          }
          summary(data).then(res=>{
              if (res.status===200) {
                 this.navList[0].state=this.navList[0].state.concat(res.data) 
              }else{
                  uni.showToast({title:res.msg,icon:'none'})
              }
          }).catch(err=>{
                  uni.showToast({title:err.msg,icon:'none'})
          })
      },
      getArea(){
           const data={
              page:this.page1,
              size:this.size,
              customerKeyword:this.customerKeyword,
              days:this.days,
          }
          customerAreaSummary(data).then(res=>{
              if (res.status===200) {
                   if(res.data.content.length<this.size)
              this.end1 = true
               this.navList[1].state=this.navList[1].state.concat(res.data.content)
              console.log(this.navList[1].state,'区域汇总');
              }else{
                  uni.showToast({title:res.msg,icon:'none'})
              }
             
          }).catch(err=>{
                  uni.showToast({title:err.msg,icon:'none'})
          })
      },
      getUser(){
           const data={
              page:this.page2,
              size:this.size,
              customerKeyword:this.customerKeyword,
              days:this.days,
          }
          UserSummary(data).then(res=>{
               if (res.status===200) {
                   if(res.data.content.length<this.size)
              this.end2 = true
               this.navList[2].state=this.navList[2].state.concat(res.data.content)
               }else{
                  uni.showToast({title:res.msg,icon:'none'})
              }
               
          }).catch(err=>{
                  uni.showToast({title:err.msg,icon:'none'})
          })
      },
    //   点击top
      getdata(i){
          this.index=i
          console.log('==================')
          console.log(this.customerKeyword)
          console.log(this.days)
          this.customerKeyword=''
          this.days=30
          console.log(this['page'+i],'kkkkkkkhhhhhh');
          
      },
    //   分页+
      addpage(i){
        if(this['end'+i])return
        this['page'+i]++
          if(i===1){
              console.log(i,'kkkkk')
            //   if(this.end)return
                // this.page++,
                this.getArea()
          }else if(i===2){
              console.log(i,'hhhhhhhh')
            //   if(this.end)return
                // this.page++,
                this.getUser()
          }
          
      },
    //   搜索
      obtainData(i){
        this['page'+i]=1
        this.navList[i].state=[]
          if (i===0) {
            this.getsummary()
          }else if(i===1){
            this.getArea()
          }else if(i===2){
            this.getUser()
        }
        
        // if(i===0) {
        //     this.navList[0].state=[]
        // }else if (i===1) {
            
        // }
        console.log('关键字',this.customerKeyword);
      },
      detail(item){
          
          uni.navigateTo({url:`/order/untouched/detail?days=${this.days}&customerKeyword=${this.customerKeyword}&detail=${item}&type=1`})
      },
      getAreaId(item){
          
          uni.navigateTo({url:`/order/untouched/detail?days=${this.days}&customerKeyword=${this.customerKeyword}&AreaId=${item}&type=2`})
      },
      getUserId(item){
          
          uni.navigateTo({url:`/order/untouched/detail?days=${this.days}&customerKeyword=${this.customerKeyword}&UserId=${item}&type=3`})
      },
    //   天数
    inputval(e){
      this.days=e.detail.value
      if (this.days) {
        this.navList[this.index].state=[]
          if (this.index===0) {
            this.getsummary()
          }else if(this.index===1){
            this.getArea()
          }else if(this.index===2){
            this.getUser()
        }
      }
    },
    
    },
  }
  </script>
  
  <style scoped lang="scss">
  .page{
      background-color: #f6f7f7;
      // background-color: #09f0f0;
      .top{
          padding: 20rpx;
          background: white;
          // background: rgb(231, 32, 32);
          border-bottom: 1rpx #e1e1e1 solid;
          text{
              display: block;
              margin-bottom:15rpx;
          }
      }
      .content{
          //margin:0 2%;
          //width: 96%;
          .bgc-white{
              margin-top: 20rpx;
              padding: 10rpx 20rpx;
              background-color: white;
              border-radius: 20rpx;
              .small{
                  font-size: 24rpx;
              }
              .title{
                  font-weight: bold;
                  font-size: 34rpx;
                  padding-bottom: 15rpx;
                  border-bottom: 1rpx solid #f1f1f1;
              }
              .time{
                  margin: 10rpx 0;
              }
              .small2{
                  font-size: 26rpx;
              }
          }
      }
  }
  .black{
    color: #000;
  }
  </style>